this.addEventListener("load", function () {
	//配置
	var config = {
		vx: 4, //小球x轴速度,正为右，负为左
		vy: 4, //小球y轴速度
		height: 2, //小球高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 200, //点个数
		color: "120, 120, 120", //点颜色
		stroke: "165, 165, 165", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};

	//调用
	CanvasParticle(config);

	// 数据
	let data = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.20c00" },
	];
	//    遍历数组
	data.forEach(function (v, i) {
		$("#bannerBg .mony").innerHTML += `
		<li ${i == 0 ? " class='on'" : ""} data-index=${i}>
								${v.times}次
								<span></span>
							</li>
		`;
	});
	// 身份证实名认证部分
	// 给父元素添加点击事件
	$("#bannerBg .mony").addEventListener("click", function (e) {
		// 判断只有li的元素才添加点击事件
		if (e.target.nodeName === "LI") {
			// 判断li包含了是否有这个类名 取反 就是不包含的才执行里面的代码
			if (!e.target.classList.contains("atical")) {
				// 一刀切
				$("#bannerBg .mony li").forEach(function (v) {
					v.classList.remove("on");
				});
				// 给点击的类名添加样式
				e.target.classList.add("on");
				// 点击的li中的dataset中的索引拿到
				let num = parseFloat(e.target.dataset.index);
				$(
					"#bannerBg .textfr .red"
				).innerHTML = `&yen;${data[num].price} <span>约${data[num].unitPrice}元/次，仅限企业实名购买</span>`;
			}

			// 	// console.log(data[i - 1]);
			// 	if(){

			// 	}
			//获取标签

			// if (num) {
			// 	$(
			// 		"#bannerBg .textfr .red"
			// 	).innerHTML = `&yen;${data[num].price} <span>约${data[num].unitPrice}元/次，仅限企业实名购买</span>`;
			// }
			// 	console.log(i);
			// 	console.log(data[i - 1]);

			// });
		}
	});
	// $("#bannerBg .mony li").forEach(function (v) {
	// 	v.addEventListener("click", function () {
	// 		$("#bannerBg .mony li").forEach(function (v) {
	// 			v.classList.remove("on");
	// 		});
	// 		v.classList.add("on");
	// 	});
	// });

	// 内容的选项卡部分
	$("#APIText ul li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$("#APIText ul li").forEach(function (v) {
				v.classList.remove("on");
			});
			this.classList.add("on");
			$("#APIText .APICont div").forEach(function (v) {
				v.style.display = "none";
			});
			$("#APIText .APICont div")[i].style.display = "block";
			// console.log($("#APIText .APICont div")[i]);
		});
	});

	// function tabchange(tabeslecoter, tabeclassname, contslecoter, contclassname) {
	// 	$(tabeslecoter).forEach(function (v, i) {
	// 		v.addEventListener("click", function () {
	// 			$(tabeslecoter).forEach(function (v) {
	// 				v.classList.remove(tabeclassname);
	// 			});
	// 			this.classList.add(tabeclassname);
	// 			$(contslecoter).forEach(function (v) {
	// 				v.style.display = !contclassname;
	// 			});
	// 			$(contslecoter)[i].style.display = contclassname;
	// 		});
	// 	});
	// }

	// tabchange({
	// 	tabeslecoter: "#APIText ul li",
	// 	tabeclassname: "on",
	// 	contslecoter: "#APIText .APICont div",
	// 	contclassname: "block" || "none",
	// });
});
